<template>
  <scroll-view scroll-y="true" class="list" :refresher-enabled="enabled" :refresher-triggered="triggered" @scroll-top=""
    :refresher-threshold="100" :lower-threshold="200" refresher-background="#F8F8F8" @refresherrefresh="onRefresh"
    @refresherrestore="onRestore" @scrolltolower="scrolltolower">
    <template v-if="data?.length || showList">
      <slot></slot>
      <view style="height: 40rpx; width: 100%;"></view>
      <up-loadmore :status="status" fontSize="28" iconSize="34" />
      <view style="height: 40rpx; width: 100%;"></view>
    </template>
    <template v-else class="row emptyWrap">
      <common-empty />
    </template>
  </scroll-view>
</template>

<script>
export default {
  props: {
    pageNum: {
      type: Number,
      default: () => 1,
    },
    pageSize: {
      type: Number,
      default: () => 10,
    },
    total: {
      type: Number,
      default: () => 0,
    },
    data: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    showList: {
      type: Boolean,
      default: () => false,
    },
    noCreate: {
      type: Boolean,
      default: () => false,
    }
  },
  data() {
    return {
      enabled: false,
      triggered: 'restore',
      _freshing: false,
    }
  },
  computed: {
    status() {
      if (this.loading || this.total > this.pageNum * this.pageSize) {
        return 'loading'
      }
      return 'nomore'
    },
  },
  created() {
    this._freshing = true;
    const _that = this;
    if (!_that.noCreate) {
      this.$emit("onRefresh", () => {
        _that._freshing = false;
        _that.enabled = true;
      })
    } else {
      _that._freshing = false;
      _that.enabled = true;
    }
  },
  methods: {
    async onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      const _that = this;
      console.log('onRefresh')
      this.$emit("onRefresh", () => {
        _that.triggered = false;
        _that._freshing = false;
      })
    },

    onRestore() {
      this.triggered = 'restore'; // 需要重置
      console.log("onRestore");
    },

    scrolltolower() {
      console.log('scrolltolower')
      if (!this.loading && this.total > this.pageNum * this.pageSize) {
        this.$emit("getMore")
      }
    },

    scrollToView() {

    }
  },
}
</script>

<style lang="scss" scoped>
.emptyWrap {
  height: 100%;
  width: 100%;
  flex: 1;
  justify-content: center;
}
.list {
  height: 100%;
  width: 100%;
}
</style>
